<template>
  <div class="readCom">
    <lay-card>
      <div class="title"> {{ getData.title }}</div>
      <div class="content">
        <p v-html="getData.content"></p>
      </div>
      <div class="footer">
        <span>
          <lay-avatar :src="avatar(getData.postAvatar)" radius></lay-avatar> {{ getData.postNickname }}
          于： {{ getData.postTime }}
        </span>
      </div>
      <div class="attments" v-if="getAttments != null">
        <div class="cxuu_content_download">
          <lay-line contentPosition="left">附件下载</lay-line>
          <ol>
            <li v-for="item in getAttments"><a :href="systemConfig.hostURL + item.url"
                :download="item.filename">{{ item.filename }} </a></li>
          </ol>
        </div>
      </div>
      <div class="closeBtn">
        <lay-button @click="readed" type="primary" prefix-icon="layui-icon-ok-circle">
          确定
        </lay-button>
      </div>
    </lay-card>
  </div>
</template>
<script lang="ts" name="NoticeRead" setup>
import { reactive, toRefs, ref } from "vue";
import { systemConfig } from "../../../../library/config"
import { layer } from "@layui/layer-vue";
import { Attment } from "../../../../types/attment"
import { getRead } from "../../../../api/module/notice";
import { getNoticeCount } from "../../../../api/module/statistics";
import { useUserStore } from '../../../../store/user';
import { ViewNotice } from "../../../../types/notice"
interface UploadProps {
  noticeId: number,
}
const props = withDefaults(defineProps<UploadProps>(), {
  noticeId: 0,
});
//定义模型
const putData = reactive({
  getData: <ViewNotice><unknown>[],
  getAttments: [<Attment>{}],
})
const emit = defineEmits(["update:modelValue"])
const avatar = (src: string) => {
  return src != null ? systemConfig.hostURL + src : null
}
const userStore = useUserStore() as any;
const { getData, getAttments } = toRefs(putData)
const noticeId = ref(props.noticeId)
getRead(noticeId.value).then((res) => {
  if (res.status == 1) {
    getData.value = res.data.data
    getAttments.value = res.data.attments
    getNoticeCount().then((res) => {
      if (res.status == 1) {
        userStore.statistics.noticeNoRead = res.data.data;
      }
    })
  } else {
    layer.msg("获取信息失败！", { icon: 2 })
  }
})
const readed = () => {
  emit('update:modelValue', false)
}
</script>
<style scoped>
.readCom {
  padding: 20px;
}

.title {
  margin: auto;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  text-align: center;
}

.content {
  margin: auto;
  font-size: 14px;
  line-height: 30px;
  text-align: left;
  padding: 20px;
  text-indent: 40px;
}

.footer {
  margin: auto;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding: 20px;
  text-indent: 40px;
}

.cxuu_content_download {
  margin: auto;
  font-size: 16px;
  padding-left: 50px;
  padding: 40px;
}

.cxuu_content_download ol {
  margin: auto;
  list-style-type: none;
  counter-reset: sectioncounter;
}

.cxuu_content_download ol li {
  line-height: 30px;
  height: 30px;
}

.cxuu_content_download ol li:before {
  content: counter(sectioncounter) "、";
  counter-increment: sectioncounter;
}


.closeBtn {
  margin: auto;
  height: 40px;
  line-height: 40px;
  width: 120px;
}
</style>